<template>
  <view class="profile-container">
    <!-- 头部信息 -->
    <view class="header">
      <image src="../../static/logo.png" mode="aspectFill" class="avatar"></image>
      <text class="username">用户名</text>

    </view>
    <!-- 功能列表 -->
    <view class="list-container">
      <view class="list-item" @click="editPhoneNumber">
        <view class="item-content" @click="editPhoneNumber">
          <text class="icon">👤</text> <!-- 使用 Emoji 或本地图标 -->
          <text>手机号码</text>
        </view>
        <text class="arrow">></text>
      </view>
      <view class="list-item" @click="viewHistory">
        <view class="item-content" @click="viewHistory">
          <text class="icon">🔔</text> <!-- 使用 Emoji 或本地图标 -->
          <text>预约记录</text>
        </view>
        <text class="arrow">></text>
      </view>
      <view class="list-item" @click="logout">
        <view class="item-content">
          <text class="icon">🚪</text> <!-- 使用 Emoji 或本地图标 -->
          <text>退出登录</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    editPhoneNumber() {
      uni.showModal({
        title: '修改手机号码',
        content: '',
        editable: true,
        placeholderText: '请输入您的手机号码',
        success: (res) => {
          if (res.confirm) {
            const newPhoneNumber = res.content;
            const phoneRegex = /^1[3-9]\d{9}$/;
            if (!phoneRegex.test(newPhoneNumber)) {
              uni.showToast({
                title: '请输入正确的手机号码',
                icon: 'none'
              });
              return;
            }
            console.log('新的手机号码:', newPhoneNumber);
            uni.setStorageSync('phoneNumber', newPhoneNumber);
            uni.showToast({
              title: '手机号码已更新',
              icon: 'success'
            });
          }
        }
      });
    },
    viewHistory() {
      uni.navigateTo({
        url: '/pages/history/history'
      });
    },
    logout() {
      uni.clearStorageSync();
      uni.reLaunch({
        url: '/pages/login/login'
      });
    }
  }
};
</script>

<style lang="scss">
.profile-container {
  background-color: #f3f4f6; /* 类似 bg-gray-100 */
  min-height: 100vh;
  font-family: sans-serif;
}

.header {
  background-color: #2563eb; /* 类似 bg-blue-600 */
  color: white;
  padding: 32rpx; /* 类似 p-8 */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.avatar {
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
  margin-bottom: 16rpx; /* 类似 mb-4 */
}

.username {
  font-size: 40rpx; /* 类似 text-2xl */
  font-weight: bold;
}



.list-container {
  padding: 16rpx; /* 类似 p-4 */
}

.list-item {
  background-color: white;
  border-radius: 8rpx; /* 类似 rounded-md */
  padding: 24rpx; /* 类似 p-4 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx; /* 模拟 space-y-2 */
  border-bottom: 1rpx solid #eee;
}

.list-item:last-child {
  margin-bottom: 0;
  border-bottom: none;
}

.item-content {
  display: flex;
  align-items: center;
}

.icon {
  margin-right: 16rpx; /* 类似 mr-2 */
  color: #4b5563; /* 类似 text-gray-600 */
  font-size: 32rpx;
}

.arrow {
  color: #9ca3af; /* 类似 text-gray-400 */
  font-size: 28rpx;
}
</style>